<div id="content" class="home">
    <div class="row" style="height: 12px;">
        <!-- <sa-big-breadcrumbs [items]="['控制台']" icon="fa fa-tachometer" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs> -->
    </div>

	<div class="welcome-wrapper" *ngIf="welcomeHome && !onlineHome && !apiHome && !baseDataHome">
		<span class="content">
		  <span>欢迎使用</span>
		  <span style="color: #409eff">汉德</span>
		  <span>平台</span>
		</span>
	</div>

    <div *ngIf="baseDataHome">
    	<div class="row">
    		<div class="col-xs-6 home_top col-lg-16">
	    		<div class="s_module" title="运载重量">
	    			<div class="s_corner"><img src="assets/img/home/weight.png"  class="corner_icon"/></div>
	    			<div class="sensor_module">
						<span class="title word_nowrap">运载重量</span>
						<div class="num" style="color: #6ea1f7;">
							<span>{{baseData.totalWeight.data}}</span>
							<span class="text">{{baseData.totalWeight.size}}吨</span>
						</div>
					</div>
	    		</div>
	    	</div>
	    	<div class="col-xs-6 home_top col-lg-16">
	    		<div class="s_module" title="运载里程">
	    			<div class="s_corner"><img src="assets/img/home/distance.png"  class="corner_icon"/></div>
	    			<div class="sensor_module">
		    			<span class="title word_nowrap">运载里程</span>
						<div class="num" style="color: #6ea1f7;">
							<span>{{baseData.totalDistance.data}}</span>
							<span class="text">{{baseData.totalDistance.size}}公里</span>
						</div>
					</div>
	    		</div>
	    	</div>
	    	<div class="col-xs-6 col-lg-16 home_top">
	    		<div class="s_module" title="运载次数">
	    			<div class="s_corner" ><img src="assets/img/home/trans.png"  class="corner_icon"/></div>
	    			<div class="sensor_module">
		    			<span class="title word_nowrap">运载次数</span>
						<div class="num" style="color: #6ea1f7;">
							<span>{{baseData.totalCount.data}}</span>
							<span class="text">{{baseData.totalCount.size}}次</span>
						</div>
					</div>
	    		</div>
	    	</div>
	    	<div class="col-xs-6 col-lg-16 home_top">
	    		<div class="s_module" style="cursor: default;">
	    			<div class="s_corner"><img src="assets/img/home/data.png"  class="corner_icon"/></div>
	    			<div class="sensor_module">
						<span class="title word_nowrap" title="热库数据总量">热库数据总量</span>
						<div class="num" style="color:#6ea1f7;">
							<span>{{baseData.totalData.data}}</span>
							<span class="text">{{baseData.totalData.size}}条</span>
						</div>
					</div>
	    		</div>
			</div>
			<div class="col-xs-6 col-lg-16  home_top" >
	    		<div class="s_module" style="cursor: default;">
	    			<div class="s_corner"><img src="assets/img/home/xiaochengxu.png" style="width: 35px;height: 35px;top: 25px;" class="corner_icon"/></div>
	    			<div class="sensor_module">
						<span class="title word_nowrap" title="小程序人数统计[总注册人数|总访问人数]">小程序人数统计[总注册|总访问]</span>
						<div class="num" style="color:#6ea1f7;">
							<span style="margin-right: 5px;">{{baseData.registCount.data}}</span><span class="fix_wan">{{baseData.registCount.size}}人
							</span><span class="inline_block line_between" style="top: -4px;">|</span>
							<span style="margin-right: 5px;">{{baseData.viewCount.data}}</span><span class="fix_wan">{{baseData.viewCount.size}}次</span>
						</div>
					</div>
	    		</div>
	    	</div>
	    	<div class="col-xs-6 col-lg-16 x1320"  style="padding: 0;">
	    		<div class="s_module" style="cursor: default;">
	    			<div class="s_corner"><img src="assets/img/home/api.png"  class="corner_icon"/></div>
	    			<div class="sensor_module">
		    			<span class="title word_nowrap" title="重量异常API接口调用[前天|昨天|今天]">API接口调用[前天|昨天|今天]</span>
						<div class="num word_nowrap" style="color:#6ea1f7;font-size: 14px;" title="{{baseData.api0.data}}万|{{baseData.api1.data}}万|{{baseData.api2.data}}万">
							<span style="font-size: 20px;">{{baseData.api0.data}}</span><span class="fix_wan">{{baseData.api0.size}}
							</span><span class="inline_block line_between" style="top: -4px;">|</span>
							<span style="font-size: 20px;">{{baseData.api1.data}}</span><span class="fix_wan">{{baseData.api1.size}}</span>
							<span class="inline_block line_between" style="top: -4px;">|</span>
							<span style="font-size: 28px;">{{baseData.api2.data}}</span>
							<span class="fix_wan">{{baseData.api2.size}}</span>
						</div>
					</div>
	    		</div>
			</div>
	    </div>
    </div>
    <div class="row">
    	<!-- <div class="col-xs-12 col-md-6 cancel_padding_right" id="carDataModule" style="padding:13px 13px 13px 0;" [hidden]="!onlineHome">
    		<div class="home_module clearfix">
				<div class="">
					<div class="clearfix">
						<div style="padding: 0px; position: relative;">
							<span class="module-title"><i class="fa fa-truck"></i> 车辆在线情况</span>
							<div class="col-xs-12" id="onlinePie" style="min-width: 250px; min-height: 355px;"></div>
						</div>
					</div>
				</div>
				<div class="" style="height: 140px;border-top: 1px dashed #ccc;">
					<div class="grid3 col-xs-4">
						<span class="grey"><i class="fa fa-truck fa-2x green icon_car"></i></span>
						<div class="car_num grey">在线车辆<span class="bigger green">{{onlineNum}}</span></div>
					</div>
					<div class="grid3 col-xs-4">
						<span class="grey"><i class="fa fa-truck fa-2x grey icon_car"></i></span>
						<div class="car_num grey">离线车辆<span class="bigger  grey">{{offlineNum}}</span></div>
					</div>
					<div class="grid3 col-xs-4 no_border">
						<span class="grey"><i class="fa fa-truck fa-2x icon_car" style="color: #6ea1f7;"></i></span>
						<div class="car_num grey">总车辆<span class="bigger" style="color: #6ea1f7;">{{totalNum}}</span></div>
					</div>
				</div>
			</div>
		</div> -->
		<!-- <div class="col-xs-12 col-md-4  cancel_padding_right" *ngIf="baseDataHome" style="padding:13px 13px 13px 0;background-color: transparent;">
			<div class="home_module" style="background-color: #fff;position: relative;box-sizing: border-box;overflow: visible;">
				<span class="module-title"><i class="fa fa-wrench"></i> 设备安装记录</span>
				<calendar-widget></calendar-widget>
			</div>
		</div> -->
		<div class="col-xs-12 col-md-6 cancel_padding_right" id="installModule" style="padding:13px 13px 13px 0;height: 570px;" *ngIf="baseDataHome">
    		<div class="home_module" style="background-color: #fff;position: relative;box-sizing: border-box;overflow: visible;">
				<div class="home-title">
					<span class="module-title"><i class="fa fa-truck"></i>设备安装统计</span>
					<div class="module-tap">
						<div class="homeTap" (click)="homeTap(3)" [ngClass]="{'active':homeTapValue == '3'}"><span>年安装量</span></div>
						<div class="homeTap" (click)="homeTap(1)" [ngClass]="{'active':homeTapValue == '1'}"><span>月安装量</span></div>
						<div class="homeTap" (click)="homeTap(2)" [ngClass]="{'active':homeTapValue == '2'}"><span>日安装量</span></div>
						<div class="homeTap" (click)="homeTap(4)" [ngClass]="{'active':homeTapValue == '4'}"><span>总量(日)</span></div>
						<div class="homeTap" (click)="homeTap(5)" [ngClass]="{'active':homeTapValue == '5'}"><span>按月汇总</span></div>
						<div class="homeTap" (click)="homeTap(6)" [ngClass]="{'active':homeTapValue == '6'}"><span>按天汇总</span></div>
					</div>
				</div>
				<div class="home-Jump" *ngIf="homeTapValue != 5 && homeTapValue != 6">
					<div class="jump-previous" *ngIf="homeTapValue == 1 || homeTapValue == 3" [ngClass]="{'jump-disabled': isPrevious}" (click)="jumpPage(1)"><i class="fa fa-angle-left"></i></div>
					<div class="jump-selectYear">
						<select class="selectYear" [(ngModel)]="selectYear" (change)="chooseYear($event.target.value)">
							<option [value]="item" *ngFor="let item of selectYearList">{{item}}年</option>
						</select>
					</div>
					<div class="jump-previous" *ngIf="homeTapValue == 2 || homeTapValue == 4" [ngClass]="{'jump-disabled': isPrevious}" (click)="jumpPage(1)"><i class="fa fa-angle-left"></i></div>
					<div class="jump-selectMonth" *ngIf="homeTapValue == 2 || homeTapValue == 4">
						<select class="selectMonth" [(ngModel)]="selectMonth" (change)="chooseMonth($event.target.value)">
							<option [value]="item" *ngFor="let item of selectMonthList">{{item}}月</option>
						</select>
					</div>
					<div class="jump-next" [ngClass]="{'jump-disabled': isNext}" (click)="jumpPage(2)"><i class="fa fa-angle-right"></i></div>
					<div class="jump-date">
						<span class="toyear" *ngIf="homeTapValue == 1 || homeTapValue == 3" (click)="jumpBackYear()">今年</span>
						<span class="today" *ngIf="homeTapValue == 2 || homeTapValue == 4" (click)="jumpBackMonth()">今日</span>
					</div>
				</div>
				<div class="home-main-echart" [ngClass]="{'calendar': homeTapValue == 5 || homeTapValue == 6}">
					<div id="histogramCharts" *ngIf="homeTapValue != 5 && homeTapValue != 6" style="height: 432px;"></div>
					<calendar-widget *ngIf="homeTapValue == 5 || homeTapValue == 6" [homeTapValue]="homeTapValue"></calendar-widget>
				</div>
			</div>
		</div>
    	<div class="col-xs-12 col-md-6  cancel_padding_right " id="carMapModule" [hidden]="!onlineHome" style="padding:13px 0;min-height: 570px;">
    		<div class="home_module" style="position: relative;">
    			<span class="module-title"><i class="fa  fa-map-marker"></i> 车辆在线分布图</span>
				<div class="col-xs-12 col-md-3 " style="margin-top: 45px;">
					<div class="grid3">
						<div class="carTitle">
							<img src="assets/img/home/total.png"  class="total_icon"/>
							<div class="car_num blueColor">车辆总数</div>
						</div>
						<div class="carValue totalValue">
							<span class="blueColor" style="color: #0c66c9;">{{totalNum}}</span>台
						</div>
					</div>
					<div class="grid3" style="padding-left: 20px;">
						<div class="carTitle">
							<img src="assets/img/home/online.png"  class="online_icon"/>
							<div class="car_num grey">在线车辆</div>
						</div>
						<div class="carValue">
							<span class="" style="color: #09b158;">{{onlineNum}}</span>台
						</div>
					</div>
					<div class="grid3" style="padding-left: 20px;">
						<div class="carTitle">
							<img src="assets/img/home/offline.png"  class="offline_icon"/>
							<div class="car_num grey">离线车辆</div>
						</div>
						<div class="carValue">
							<span class="" style="color: #a6a6a6">{{offlineNum}}</span>台
						</div>
					</div>
					<div class="grid3" style="padding-left: 20px;">
						<div class="carTitle">
							<div id="onlinePie" style="width: 80px; min-height: 100px;position:relative;left:-10px"></div>
							<div class="car_num grey" style="padding-left: 12px;padding-top: 10px;">在线率</div>
						</div>
						<div class="carValue">
							<span class="" style="color: #000">{{onlineRate}}</span>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-md-9 ">
					<div class="" style="height: 530px;" id="carmap"></div>
				</div>
    		</div>
		</div>
    </div>
	<div class="row" [hidden]="!apiHome">
		<div class="col-xs-12 col-md-6 col-lg-3-self cancel_padding_right" style="padding-left: 0;">
			<div class="module_main">
				<div class="m-flow" >
					<span class="chartTitle inline_block" style="margin-left: 12px;"><i class="fa fa-bar-chart-o"></i> 流量统计图 </span>
					<span class="right" style="margin-right: 24px;"><span style="font-weight: normal;">总进站:</span>{{totalInNum}} <span style="font-weight: normal;margin-left: 4px;">总出站:</span>{{totalOutNum}}</span>
					<div class="flowChart"  id="flowChart"></div>
				</div>
			</div>
		</div>
		<!--<div class="col-xs-12 col-md-12 col-lg-8" style="padding: 0;">-->
			<div class="col-xs-12 col-md-6 module col-lg-3-self cancel_padding_right self-fix-padding">
				<div class="module_main">
					<span class="module_title_box word_nowrap"><span class="inline_block module_title"><i class="fa fa-bar-chart-o"></i> API调用排名TOP5统计图</span></span>
					<div class="clearfix">
						<div class="top_module opreation">
							<div class="top_module  module_select_box inline_block">
								<span class="inline_block module_select_text">汇总方式
								</span><select name="" [(ngModel)]='timeTypeAPI' class="inline_block module_select" (change)="timeTypeAPIChange($event.target.value)">
									<option value="0">按小时统计</option>
									<option value="1">按天统计</option>
								</select>
							</div><span class="inline_block span_line">-
							</span><div class="inline_block time_range">
								<input [(ngModel)]='timeRangeAPI' (change)="timeRangeAPIChange()" type="number" placeholder="近几天" *ngIf="timeTypeAPI === '1'" class="form-control inline_block module_time_input"/>
								<input [(ngModel)]='timeRangeAPI' (change)="timeRangeAPIChange()" type="number" placeholder="近几小时" *ngIf="timeTypeAPI === '0'" class="form-control inline_block module_time_input"/>
							</div><div class="inline_block span_line">
								<span *ngIf="timeTypeAPI === '0'">小时</span><span *ngIf="timeTypeAPI === '1'">天</span>
							</div>
						</div>
					</div>
					<div id="apiMap" class="module_chart"></div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 module col-lg-3-self cancel_padding_right">
				<div class="module_main">
					<span class="module_title_box word_nowrap"><span class="inline_block module_title"><i class="fa fa-bar-chart-o"></i> 用户API调用排名TOP5统计图</span></span>
					<div class="clearfix">
						<div class="top_module opreation"> 
							<div class="top_module  module_select_box inline_block">
								<span class="inline_block module_select_text">汇总方式
								</span><select name="" [(ngModel)]='timeTypeUser' class="inline_block module_select" (change)="timeTypeUserChange($event.target.value)">
									<option value="0">按小时统计</option>
									<option value="1">按天统计</option>
								</select>
							</div><span class="inline_block span_line">-
							</span><div class="inline_block time_range">
								<input [(ngModel)]='timeRangeUser' (change)="timeRangeUserChange()" type="number" placeholder="近几天" *ngIf="timeTypeUser === '1'" class="form-control inline_block module_time_input"/>
								<input [(ngModel)]='timeRangeUser' (change)="timeRangeUserChange()" type="number" placeholder="近几小时" *ngIf="timeTypeUser === '0'" class="form-control inline_block module_time_input"/>
							</div><div class="inline_block span_line">
								<span *ngIf="timeTypeUser === '0'">小时</span><span *ngIf="timeTypeUser === '1'">天</span>
							</div>
						</div>
					</div>
					<div id="userMap" class="module_chart"></div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 module col-lg-3-self" style="padding-right: 0;">
				<div class="module_main">
					<span class="module_title_box word_nowrap"><span class="inline_block module_title"><i class="fa fa-bar-chart-o"></i> 流量统计图</span></span>
					<div class="clearfix">
						<div class="top_module opreation">
							<div class="top_module  module_select_box inline_block">
								<span class="inline_block module_select_text">汇总方式
								</span><select name="" [(ngModel)]='timeTypeFlow' class="inline_block module_select" (change)="timeTypeFlowChange($event.target.value)">
									<option value="0">按小时统计</option>
									<option value="1">按天统计</option>
								</select>
							</div><span class="inline_block span_line">-
							</span><div class="inline_block time_range">
								<input [(ngModel)]='timeRangeFlow' (change)="timeRangeFlowChange()" type="number" placeholder="近几天" *ngIf="timeTypeFlow === '1'" class="form-control inline_block module_time_input"/>
								<input [(ngModel)]='timeRangeFlow' (change)="timeRangeFlowChange()" type="number" placeholder="近几小时" *ngIf="timeTypeFlow === '0'" class="form-control inline_block module_time_input"/>
							</div><div class="inline_block span_line">
								<span *ngIf="timeTypeFlow === '0'">小时</span><span *ngIf="timeTypeFlow === '1'">天</span>
							</div>
						</div>
					</div>
					<div id="flowMap" class="module_chart"></div>
				</div>
			</div>
		<!--</div>-->
	</div>
</div>